<template>
  <div class="root">
    <div class="root_success" v-if="status === 1">
      <div class="ab_succ">
        <i
          class="success_icon"
          :style="{
            background: 'url(../../static/images/success.png)',
            backgroundSize: 'cover',
          }"
        ></i>
        <span>支付成功</span>
      </div>
      <div class="back_order" @click="toLeaseDetail">返回</div>
    </div>
    <div class="root_failed" v-if="status === -1">
      <div class="ab_succ">
        <i
          class="failed_icon"
          :style="{
            background: 'url(../../static/images/failed.png)',
            backgroundSize: 'cover',
          }"
        ></i>
        <span>支付失败</span>
      </div>
      <div class="back_order" @click="toCenter">返回</div>
    </div>
    <div class="root_loading" v-if="status === 0">
      <div class="ab_load">
        <i
          class="load_icon"
          :style="{
            background: 'url(../../static/images/loading.gif)',
            backgroundSize: 'cover',
          }"
        ></i>
        <span>正在支付...</span>
      </div>
      <!-- <div class="back_order" @click="toCenter">返回</div> -->
    </div>
  </div>
</template>


<script>
import transactionApi from "@/api/transaction";
import wxApi from "@/api/wx_api";

export default {
  data() {
    return {
      status: 0,
      timer: "",
      timerTimes: 0
    };
  },
  computed: {},
  mounted() {
    wx.showShareMenu();
    const self = this;
    this.timer = setInterval(self.getTransaction, 1000);
  },
  methods: {
    toLeaseDetail() {
      if (this.$store.state.locatePage === '') {
        this.toCenter();
      } else {
        this.$router.replace({ path: this.$store.state.locatePage });
      }
    },
    toCenter() {
      wx.switchTab({
        url: '/pages/center'
      })
    },
    getTransaction() {
      const self = this;
      this.$http
        .request({
          url: transactionApi.getTransaction,
          method: "POST",
          // body: { orderId: '20201228-141041-XXLL' }
          body: { orderId: this.$store.state.checkTransactionId }
        })
        .then(res => {
          self.status = res.status ? parseInt(res.status) : res.status;
          if (self.timerTimes >= 5) {
            clearInterval(self.timer);
            self.status = -1;
          }
          if (self.status !== undefined && self.status !== 0) {
            self.$http.request({
              url: wxApi.wxRefresh,
              method: "POST",
              body: { openId: this.$store.state.user.openId }
            }).then(userRes => {
              self.$store.commit("saveUser", userRes);
            });
            clearInterval(self.timer);
          }
          self.timerTimes += 1;
        });
    }
  }
};
</script>


<style scoped lang="less">
.root {
  height: 100vh;
  .root_success {
    height: 100%;
    position: relative;
    .ab_succ {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      .success_icon {
        width: 70px;
        height: 70px;
        transform: translate(25%, 0%);
        margin-bottom: 55px;
      }
      span {
        color: #3fb837;
        font-size: 26px;
      }
    }
  }
  .root_loading {
    height: 100%;
    .ab_load {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      .load_icon {
        width: 70px;
        height: 70px;
        transform: translate(50%, 0%);
        margin-bottom: 55px;
      }
      span {
        font-size: 26px;
        text-align: center;
        letter-spacing: 4px;
      }
    }
  }
  .back_order {
    position: absolute;
    font-size: 14px;
    background: #f0eff4;
    border: 1px solid #565365;
    border-radius: 10px;
    padding: 10px 20px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .root_failed {
    height: 100%;
    background: #f0eff4;
    .ab_succ {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      .failed_icon {
        width: 70px;
        height: 70px;
        transform: translate(33%, 0%);
        margin-bottom: 55px;
      }
      span {
        font-size: 26px;
        text-align: center;
        letter-spacing: 4px;
      }
    }
  }
}
</style>